:root {
	/* Layout variables */
	--accordion-padding: 0.875rem;
	--accordion-radius: 0.625rem;
	--accordion-duration: 200ms;
	--accordion-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Icon sizes */
	--accordion-icon-size: 1.25rem;

	/* Colors */
	--accordion-background-color: hsl(0, 0%, 100%);
	--accordion-background-color-dark: hsl(0, 0%, 9.02%);
	--accordion-background-hover: hsl(0, 0%, 96.86%);
	--accordion-background-hover-dark: hsl(0, 0%, 10.98%);
	--accordion-border-color: hsl(0, 0%, 92.16%);
	--accordion-border-color-dark: hsl(0, 0%, 20%);
	--accordion-text-color: hsl(0, 0%, 9.02%);
	--accordion-text-color-dark: hsl(0, 0%, 90%);
	--accordion-icon-color: hsl(0, 0%, 36.08%);
	--accordion-icon-color-dark: hsl(0, 0%, 60%);
	--accordion-arrow-color: hsl(0, 0%, 63.92%);
	--accordion-arrow-color-dark: hsl(0, 0%, 80%);
	--accordion-content-color: hsl(0, 0%, 36.08%);
	--accordion-content-color-dark: hsl(0, 0%, 60%);
	--accordion-focus-ring: hsl(227.93, 100%, 63.92%);
	--accordion-focus-ring-dark: hsl(228.07, 69.8%, 48.04%);
	--accordion-focus-shadow: 0 0 0 2px var(--accordion-focus-ring);
	--accordion-focus-shadow-dark: 0 0 0 2px var(--accordion-focus-ring-dark);
}

.root {
	& > :not([hidden]) ~ :not([hidden]) {
		--space-y-reverse: 0;
		margin-top: calc(1rem * calc(1 - var(--space-y-reverse)));
		margin-bottom: calc(1rem * var(--space-y-reverse));
	}
}

.item {
	position: relative;
	padding: var(--accordion-padding);
	background-color: var(--accordion-background-color);
	box-shadow: inset 0 0 0 1px var(--accordion-border-color);
	transition: all var(--accordion-duration) var(--accordion-ease);
	border-radius: var(--accordion-radius);
	overflow: visible;
}

:global(.c15t-dark) .item {
	background-color: var(--accordion-background-color-dark);
	box-shadow: inset 0 0 0 1px var(--accordion-border-color-dark);
}

.item:is(:hover, [data-state="open"]) {
	background-color: var(--accordion-background-hover);
	box-shadow: inset 0 0 0 1px transparent;
}

:global(.c15t-dark) .item:is(:hover, [data-state="open"]) {
	background-color: var(--accordion-background-hover-dark);
	box-shadow: inset 0 0 0 1px transparent;
}

/* Focus styles for item */
.item:focus-within:not(:has(.triggerInner:focus-visible)) {
	background-color: var(--accordion-background-hover);
	box-shadow: inset 0 0 0 1px transparent;
}

:global(.c15t-dark) .item:focus-within:not(:has(.triggerInner:focus-visible)) {
	background-color: var(--accordion-background-hover-dark);
	box-shadow: inset 0 0 0 1px transparent;
}

.item:has(.triggerInner:focus-visible) {
	box-shadow: var(--accordion-focus-shadow);
}

:global(.c15t-dark) .item:has(.triggerInner:focus-visible) {
	box-shadow: var(--accordion-focus-shadow-dark);
}

.trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: 100%;
	overflow: visible;
}

.triggerInner {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.625rem;
	width: 90%;
	margin: calc(-1 * var(--accordion-padding));
	padding: var(--accordion-padding);
	font-size: 0.875rem;
	line-height: 1.25rem;
	letter-spacing: -0.006em;
	font-weight: 500;
	text-align: left;
	color: var(--accordion-text-color);
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: var(--accordion-radius);
	position: relative;
	z-index: 1;
}

:global(.c15t-dark) .triggerInner {
	color: var(--accordion-text-color-dark);
}

.triggerInner:focus-visible {
	outline: none;
}

.icon {
	width: var(--accordion-icon-size);
	height: var(--accordion-icon-size);
	color: var(--accordion-icon-color);
	flex-shrink: 0;
}

:global(.c15t-dark) .icon {
	color: var(--accordion-icon-color-dark);
}

.arrowOpen,
.arrowClose {
	width: var(--accordion-icon-size);
	height: var(--accordion-icon-size);
	transition: color var(--accordion-duration) var(--accordion-ease);
	flex-shrink: 0;
}

.arrowOpen {
	color: var(--accordion-arrow-color);
}

:global(.c15t-dark) .arrowOpen {
	color: var(--accordion-arrow-color-dark);
}

.item:hover .arrowOpen {
	color: var(--accordion-icon-color);
}

:global(.c15t-dark) .item:hover .arrowOpen {
	color: var(--accordion-icon-color-dark);
}

.arrowClose {
	color: var(--accordion-icon-color);
	display: none;
}

:global(.c15t-dark) .arrowClose {
	color: var(--accordion-icon-color-dark);
}

.item[data-state="open"] .arrowOpen {
	display: none;
}

.item[data-state="open"] .arrowClose {
	display: block;
}

.content {
	overflow: hidden;
}

@keyframes accordionDown {
	from {
		height: 0;
		opacity: 0;
	}
	to {
		height: var(--radix-accordion-content-height);
		opacity: 1;
	}
}

@keyframes accordionUp {
	from {
		height: var(--radix-accordion-content-height);
		opacity: 1;
	}
	to {
		height: 0;
		opacity: 0;
	}
}

.content[data-state="open"] {
	animation: accordionDown var(--accordion-duration) var(--accordion-ease);
}

.content[data-state="closed"] {
	animation: accordionUp var(--accordion-duration) var(--accordion-ease);
}

.contentInner {
	padding-top: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	letter-spacing: -0.006em;
	color: var(--accordion-content-color);
}

:global(.c15t-dark) .contentInner {
	color: var(--accordion-content-color-dark);
}
